<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello1</div>  <!-- document.getElementsByTagName() -->
    <div>Hello2</div>  <!-- document.getElementsByTagName() -->

    <p class="text">Hello</p><!--   document.getElementsByClassName() -->
    
    <form name="login"></form>  <!-- document.getElementByld() -->

    <div id="root">哈哈哈</div>   <!-- document.getElementByld() -->

    <div class="nav">nav1</div><!-- document.querySelector() -->
    <div class="nav">nav2</div><!-- document.querySelector() -->
   
    <script>
        // document.getElementsByTagName()
        // document.getElementsByTagName方法搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组对象(HTMLCollection实例)，可以实时反映HTML文档的变化。如果没有任何匹配的元素，就返回一个空集
        // var paras = document.getElementsByTagName('p');
        // 如果传入*，就可以返回文档中所有HTML元素
        // var allElements = document.getElementsByTagName('*');
        var divs1 = document.getElementsByTagName("div");//var divs = document.getElementsByTagName("div")[0];
        

        var divs2 = document.getElementsByTagName("div")[1];// <div>Hello2</div>
        //通过JS修改内容
        divs2.innerHTML = "Hello World";

        console.log(divs1);   
        console.log(divs2); 
        
        // document.getElementsByClassName()
        // document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例)，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中
        // var elements = document.getElementsByclassName(names);
        // 由于class是保留字，所以JavaScript一律使用className表示CSS的class
        // 参数可以是多个cass,它们之间使用空格分隔
        // var elements = document.getElementsByclassName('foo bar');

        var texts = document.getElementsByClassName("text");
        console.log(texts);

        var texts1 = document.getElementsByClassName("text")[0];
        texts1.innerHTML = "Hello!";
        console.log(texts1);

        // docurent.getElementsByName()
        // document.getElementsByName方法用于选择拥有name属性的HTML元素（比如<form>、<radio>、<img>等)，返回一个类似数组的的对象（NodeList实例)，因为name属性相同的元素可能不止一个
        // //表单为<form name="itbaizhan"></form>
        // var forms = document.getElementsByName('itbaizhan');
        
        //使用率极低
        var name1 = document.getElementsByName("login");
        console.log(name1);

        // document.getElementByld()
        // document.getElementByld方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null
        // var elem = document.getElementById('para1');
        // 注意，该方法的参数是大小写敏感的。比如，如果某个节点的id属性是main,那么document.getElementByld('Main')将返回null
        
        var roots = document.getElementById("root");
        console.log(roots);//读一个，只有一个，因为id是唯一的

        // document.querySelector()
        // document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null
        // var el1 = document.querySelector('.myclass');

        var navs = document.querySelector(".nav");//如果是id就用 "#" ， 如果是class就用"."。
        console.log(navs);//只能打印一个，默认是第一个nav1
        
        // document.querySelectorAll()
        // document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点
        // var elementList = document.querySelectorAl1('.myclass');

        var navs1 = document.querySelectorAll(".nav");
        console.log(navs1);
        
        
    </script>
</body>
</html>